<template>

	<view class="page">

		<u-navbar :fixed="false" title="我的患者" placeholder="true" :autoBack="true"></u-navbar>
		<view class="search-bar">
			<u-search v-model="keyword" placeholder="搜索患者姓名、标签" @search="onSearch" @custom="onSearch" />
		</view>

		<z-paging ref="paging" v-model="UserAllLisData" @query="queryList" usePageScroll>
			<view class="container">
				<view class="section">
					<view class="item-list">
						<view class="item" v-for="(item, index) in UserAllLisData" :key="index" @click="toUrlInfo(item.id)">
							<image :src="item.avatar" class="txx"></image>
							<view class="item-info column">
								<text class="name">{{ item.nickname }}</text>
								<text class="details" v-if="item.gender==1">男 {{item.age}}</text>
								<text class="details" v-if="item.gender==2">女 {{item.age}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>



	</view>
</template>
<script>
	import api_patient from '@/api/patient.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				keyword: null,
				UserAllLisData: [],
			};
		},
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				// this.getUserMyListFuc(); //所有患者列表
			}
		},
		methods: {

			toUrlInfo(id) {
				uni.navigateTo({
					url: '/pages/patient/info?id=' + id
				});
			},

			onSearch(value) {
				// this.getUserMyListFuc();
				this.$refs.paging.reload();
			},


			async queryList(pageNo, pageSize) {

				var per = {
					no_page: pageNo,
					page_size: pageSize,
				}
				if (this.keyword) {
					per.keyword = this.keyword
				}
				const res = await api_patient.getUserMyList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}

			},



			//所有患者列表
			// async getUserMyListFuc() {
			// 	var per = {
			// 		no_page: 1,
			// 		page_size: 10,
			// 	}
			// 	if (this.keyword) {
			// 		per.keyword = this.keyword
			// 	}
			// 	const res = await api_patient.getUserMyList(per);
			// 	if (res.code == 1) {
			// 		this.UserAllLisData = res.data.list
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },

		},
	};
</script>
<style scoped>
	.page {
		padding: 30rpx;
		height: 100vh;
	}

	.container {
		padding: 30rpx;
		background-color: #fff;
	}

	.section {
		margin-bottom: 20rpx;
	}

	.search-bar {
		margin: 20rpx 0;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #eee;
	}

	.section-header text {
		font-size: 30rpx;
		color: #333;
	}

	.count {
		font-size: 28rpx;
		color: #999;
	}

	.item-list {
		margin-top: 15rpx;
	}

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.item-info {
		margin-left: 15rpx;
	}

	.name {
		font-size: 28rpx;
		color: #3D3D3D;
		font-weight: bold;
	}

	.details {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.txx {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
	}
</style>